<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="stylesheet" href="../css/elementUi.css">
    <link rel="stylesheet" href="../css/global.css">
</head>
<body>
<div id="container">
    <div style="padding-top: 10% ;padding-left: 3%;padding-right: 3%">
        <el-form :model="registerForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="email">
                <el-input placeholder="" v-model="registerForm.email">
                    <template slot="prepend">邮&nbsp;&nbsp;箱</template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input placeholder="" show-password v-model="registerForm.password">
                    <template slot="prepend">密&nbsp;&nbsp;码</template>
                </el-input>
            </el-form-item>

            <el-form-item prop="repeatPassword">
                <el-input placeholder="" show-password v-model="registerForm.repeatPassword">
                    <template slot="prepend">确认密码</template>
                </el-input>
            </el-form-item>
        </el-form>
        <el-button @click="register()" style="width: 100%" plain>注册</el-button>
        <br/>
        <br/>
        <el-button @click="toLogin()" style="width: 100%" plain>返回登录</el-button>

    </div>

</div>


</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/util.js" type="module"></script>
<script src="../js/vue.js"></script>
<script src="../js/app.js"></script>
<script src="../js/elementUi.js"></script>

<script type="module">
    import {
        showLoading,
        network,
        hideLoading,
        showMessage, getHttpPath,
        getBrand, encodePassword,
    } from "../js/util.js";


    let vm = new Vue({
        el: "#container",
        data: {
            registerForm: {
                email: '',
                password: '',
                repeatPassword: '',
            },
            rules: {
                email: [
                    {required: true, message: '请输入邮箱地址', trigger: 'blur'},
                    {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, max: 15, message: '长度在6到15个字符', trigger: 'blur'}
                ],
                repeatPassword: [
                    {required: true, message: '重复密码', trigger: 'blur'},
                    {min: 6, max: 15, message: '长度在6到15个字符', trigger: 'blur'}
                ]
            },
        },

        mounted() {
        },
        methods: {
            toLogin() {
                window.location.href = "login.html"
            },
            register() {
                if (this.registerForm.password !== this.registerForm.repeatPassword) {
                    showMessage(this, "error", "两次输入密码不一致");
                    return;
                }
                let that = this;
                let url = getHttpPath() + '/account/register';
                console.log(vm.email + ":" + vm.password);
                showLoading(this, "正在登录", 5);
                network(url, "POST", {
                    email: vm.registerForm.email,
                    password: encodePassword(vm.registerForm.password),
                    brand: getBrand()
                }, function (data) {
                    window.location.href = "login.html"
                }, function (event, data) {
                    if (data.code === 500) {
                        hideLoading();
                        showMessage(that, "error", data.message);
                    }
                })
            }

        }


    })


</script>
</html>
